<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/19 0019
  Time: 19:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>客户流失页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<%--头部栏操作--%>
<form class="layui-form">
    <div class="layui-inline">
        <label class="layui-form-label">客户名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">流失状态</label>
        <div class="layui-input-inline">
            <select name="status">
                <option value="">请选择</option>
                <option value="0">将要流失</option>
                <option value="1">确认流失</option>
                <option value="2">挽回客户</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-filter="select" lay-submit>搜索</button>
        </div>
    </div>
</form>

<table id="customerlossTable" lay-filter="customerlossTable"></table>
<script type="text/html" id="innerToolBar">
    <%--    html模板：别的地方可以根据ID来引用该模板内容--%>
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="details">详情</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>

<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'table', 'jquery'], function () {
        var layer = layui.layer
            , form = layui.form;
        var table = layui.table;
        var $ = layui.$;

        //表单提交事件监听 submit(触发submit的按钮的lay-filter)
        form.on('submit(select)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //重新加载表格
            table.reload("customerlossTable", {
                where: {//查询条件
                    params: data.field// 会封装到LayRequest中的params中去
                },
                page: {
                    curr: 1//当前页
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        table.render({
            elem: "#customerlossTable",
            url: "${pageContext.request.contextPath}/customer/losslist",
            toolbar: '#customerlossToolbar',//开启头部工具栏
            defaultToolbar: ['filter', 'print', 'exports'],//右侧工具栏
            cols: [[//定义列信息
                {type: 'checkbox', fixed: 'left'},//最左侧复选框
                {field: "customer_id", title: "ID", width: 220},//一列数据项
                {field: "customer", title: "客户名称", width: 220,
                    templet:function (res) {//取对象属性中的属性
                        if(res.customer!=null){
                            return res.customer.name;
                        }
                        return "";
                    }},
                {field: "last_order_time", title: "上一次下单时间", width: 220},
                {field: "loss_date", title: "流失日期", width: 220},
                {field: "status", title: "流失状态", width: 220,
                    templet:function (res) {//取对象属性中的属性
                        if(res.status==0){
                            return "将要流失";
                        }else if (res.status==1){
                            return "确认流失"
                        }
                        return "挽回客户";
                    }
                },
                {fixed: 'right', title: '操作', toolbar: '#innerToolBar', width: 220}//表格内操作栏
            ]],
            page: true
        })
        layer.msg('Hello World');

        //行内操作栏监听事件
        table.on('tool(customerlossTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            switch (layEvent) {
                case 'delete':
                    layer.confirm('是否需要删除', function (index) {
                        $.post({
                            url: "${pageContext.request.contextPath}/customer/lossdelete?id=" + data.id,
                        })
                        layer.close(index)
                    //重新加载表格
                    table.reload("customerlossTable", {
                        where: {//查询条件
                            params: data.field// 会封装到LayRequest中的params中去
                        },
                        page: {
                            curr: 1//当前页
                        }
                    })
                    return false;
                    });

                    //todo 发ajax请求异步删除数据
                    break;
                case 'details':
                    layer.open({
                        title: "角色修改",
                        type: 2,
                        data:{},
                        content: "${pageContext.request.contextPath}/customer/tolossUpdate?id=" + data.id,
                        area: ['500px', '500px'],
                        maxmin: true
                    })
                    break;
            }
        });
    })
</script>
</body>
</html>
